<template>
  <div class="friends">
    <div class="left">
      <ul>
        <li :class="{ 'active': tag == 0 }" @click="tag = 0">我的关注</li>
        <li :class="{ 'active': tag == 1 }" @click="tag = 1">我的粉丝</li>
      </ul>
    </div>
    <div class=" right">
      <Follow v-show="tag == 0" />
      <Followed v-show="tag == 1" />
    </div>
  </div>
</template>

<script setup>
import Follow from './Follow.vue';
import { ref } from 'vue';
import Followed from './Followed.vue';

let tag = ref(0)

</script>

<style lang="scss" scoped>
.friends {
  display: flex;
  width: 80%;
  margin: .1667rem auto;
  font-size: .3rem;
  position: relative;

  .left {
    width: 25%;

    ul {
      li {
        padding: .2667rem;
        border-radius: .3rem;
        margin: .0833rem;
        background-color: #f1F1cF;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: #E7F7C8;
        }
      }

      .active {
        background-color: #ccc;
      }
    }
  }

  .right {
    flex: 1;
    background-color: #fff;
    max-height: 80vh;
    overflow: auto;

    //滚动条样式
    &::-webkit-scrollbar {
      width: 0.15rem;
      height: 0.1rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 0.1rem;
      border-top: 0.1rem solid #000;
      border-bottom: 0.1rem solid #000;

    }

    &::-webkit-scrollbar-track {
      background-color: #f0f0f0;
      border-radius: 0.1rem;
      border-top: 0.1rem solid hotpink;
      border-bottom: 0.1rem solid hotpink;

    }
  }
}
</style>